<script setup>
import { useRoute,useRouter } from "vue-router";
const route =useRoute()
const router =useRouter()
const goToDetail=()=>{
  router.push({
    path:'/shipSituation'
  })
}
</script>

<template>
  <!-- 桥梁信息 -->
  <div class="main">
    <div class="scrollbox">
      <div class="top">
        <span class="img">
          <img src="../static/images/Slice21.png" alt="" srcset="" />
        </span>
        <span class="name">粤清运货</span>
        <div class="btn" @click="goToDetail">详情<i class="righticon">&#xe622;</i></div>
      </div>
      <div class="bottom">
        <div class="bridgeImg">
          <img
            class="img"
            src="../static/images/ship.png"
            alt=""
          />
        </div>
        <div class="singleItem" style="margin-top:16px">
          <div class="out first">
            <div class="left">船舶名称</div>
            <div class="right textOut">桂州水道返回数发挥地方</div>
          </div>
          <div class="out">
            <div class="left">MMSI</div>
            <div class="right textOut">东凤公路上下九路</div>
          </div>
        </div>

        <div class="singleItem">
          <div class="out first">
            <div class="left">航速</div>
            <div class="right">四</div>
          </div>
          <div class="out">
            <div class="left">船舶类型</div>
            <div class="right">31m</div>
          </div>
        </div>

        <div class="singleItem">
          <div class="out first">
            <div class="left">船长</div>
            <div class="right">1935年</div>
          </div>
          <div class="out">
            <div class="left">船宽</div>
            <div class="right">1985</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  // height: 200px;
  // width: 100%;
  // overflow-y:auto ;
  .scrollbox {
    // height: auto;
    .top {
      margin-top: 16px;
      margin-left: 16px;
      display: flex;
      .img {
        width: 20px;
        height: 20px;
        padding: 2px 0;
        margin-right: 8px;
        line-height: 20px;
      }
      .name {
        height: 24px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 24px;
        margin-right: 16px;
      }
      .btn {
        height: 22px;
        font-size: 16px;
        font-weight: 400;
        color: #266fe8;
        .righticon {
          margin-left: 4px;
          font-family: "iconfont";
          font-size: 16px;
          font-style: normal;
        }
      }
    }
    .bottom {
      .bridgeImg {
        margin: 14px 16px 0 16px;
        .img {
          width: 100%;
          max-height: 100%;
          vertical-align: middle;
        }
      }
      .singleItem {
        margin-top: 4px;
        margin-right: 16px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        .out {
          width: 50%;
          display: flex;
          justify-content: space-between;
          .left {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            width: 80px;
          }
          .right {
            height: 20px;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }
        }
        .first {
          margin-right: 32px;
        }
        .textOut {
          width: 80px;
          // display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>